<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        
                        <div class="form-group m-form__group row">  
                            <label class="col-form-label">名称：</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" v-model="searchForm.local_name" placeholder="请输入">
                            </div>
                            <label class="col-form-label">ip：</label>
                            <div class="col-lg-2">
                                <input class="form-control" v-model="searchForm.ip" placeholder="请输入">
                            </div>        
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                                    @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                                <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2"
                                    @click="resetAll()"> <span><span>清空条件</span></span></b-button>                        
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">                                    
                                    <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                                    <button class="btn btn-light-danger font-weight-bold mr-2" @click="delLogError"
                                        :disabled="this.sels.length === 0">
                                        <span><i class="far fa-trash-alt"></i><span>删 除</span></span>
                                    </button>
                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" fixed="left">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <a href="javascript:;" @click="scmsMonitor(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="监控">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M5,19 L20,19 C20.5522847,19 21,19.4477153 21,20 C21,20.5522847 20.5522847,
                                        21 20,21 L4,21 C3.44771525,21 3,20.5522847 3,20 L3,4 C3,3.44771525 3.44771525,3 4,3 C4.55228475,3 5,3.44771525 5,
                                        4 L5,19 Z" fill="#000000" fill-rule="nonzero"/>
                                        <path d="M8.7295372,14.6839411 C8.35180695,15.0868534 7.71897114,15.1072675 7.31605887,14.7295372 C6.9131466,
                                        14.3518069 6.89273254,
                                        13.7189711 7.2704628,13.3160589 L11.0204628,9.31605887 C11.3857725,8.92639521 11.9928179,8.89260288 12.3991193,
                                        9.23931335 L15.358855,11.7649545 L19.2151172,6.88035571 C19.5573373,6.44687693 20.1861655,6.37289714 20.6196443,
                                        6.71511723 C21.0531231,7.05733733 21.1271029,7.68616551 20.7848828,8.11964429 L16.2848828,13.8196443 C15.9333973,
                                        14.2648593 15.2823707,14.3288915 14.8508807,13.9606866 L11.8268294,11.3801628 L8.7295372,14.6839411 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    </g>
                                </svg>
                            </span>
                        </a>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="user_name" show-overflow-tooltip label="用户名" min-width="80"></el-table-column>
                <el-table-column align="left" prop="account_name" show-overflow-tooltip label="账户" min-width="80"></el-table-column>
                <el-table-column align="left" prop="com_name" show-overflow-tooltip label="计算机名" min-width="80"></el-table-column>
                <el-table-column align="left" prop="operate_sys_name" show-overflow-tooltip label="操作系统" min-width="80"></el-table-column>
                <el-table-column align="left" prop="operate_org" show-overflow-tooltip label="构架" min-width="160"></el-table-column>
                <el-table-column align="left" show-overflow-tooltip label="jvm" min-width="210">
                    <template slot-scope="scope">
                        <b-badge class="mr-1" variant="primary">JVM可使用总内存：{{scope.row.jvm_total_mem}}</b-badge>
                        <br>
                        <b-badge class="mr-1" variant="success">JVM可使用剩余内存：{{scope.row.jvm_mem}}</b-badge>
                        <br>
                        <b-badge class="mr-1" variant="info">JVM可使用处理器个数：{{scope.row.jvm_cpu_count}}</b-badge>
                        <br>
                        <b-badge class="mr-1" variant="danger">运行环境版本：{{scope.row.environment}}</b-badge>
                        <br>
                        <b-badge class="mr-1" variant="warning">安装path：{{scope.row.path}}</b-badge>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="mac" show-overflow-tooltip label="mac" min-width="160"></el-table-column>
                <el-table-column align="left" prop="ip" show-overflow-tooltip label="ip" min-width="150"></el-table-column>                
                <el-table-column align="left" prop="create_time" show-overflow-tooltip label="初次上报时间" min-width="150"></el-table-column> 
                <el-table-column align="center" prop="update_time"  label="更新时间" min-width="150"></el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>        
        <ScmsMonitor ref="ScmsMonitorRef"></ScmsMonitor>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import ScmsMonitor from "@/view/omp/scms/scms-monitor/scms-monitor.vue";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: {local_name:"",ip:""},
            pickerOptions: {
                // disabledDate(time) {//范围不可选
                //     return time.getTime() > Date.now();
                // },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, 
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, 
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }],
            },
            dataList: [],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    components: {
        ScmsMonitor,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "物理机器信息" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_OMP_API + "/scms/monitor/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },

        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.id));
        },
        delLogError() { // 删除
            if (this.sels.length === 0) {
                handleAlert("请选择删除的数据", "warning", 3)
                return;
            }
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
                let ids = this.sels.map((item) => item.id);
                // 根据后台想要的参数格式选择
                apiUtil.delete(process.env.VUE_APP_OMP_API + "/scms/monitor/delete?id=" + ids.join(",")).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.search();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },        
        formatDigitNumber(value,formatDigit){
            if(null == value){
                return 0;
            }
            if(null == formatDigit){
                formatDigit = 2;
            }
            if(value>=0){
                return parseInt((value*Math.pow(10,formatDigit)+0.5))/Math.pow(10,formatDigit);
            } else{
                value = -value;
                return - parseInt((value*Math.pow(10,formatDigit)+0.5))/Math.pow(10,formatDigit);
            }
        },
        scmsMonitor(row){
            this.$refs.ScmsMonitorRef.showModal(row.id,row.ip,row.mac);
        },
    }
};
</script>